<html>
<head>
<style>
    h1,h2{
        white-space:nowrap;
        word-break:keep-all;
    }
    li { line-height: 20px; }
    .opt_links { color:red; margin-left:10px;}
    .opt_links a { color:red; font-size:12px;  }
    summary { 
        white-space:nowrap;
        word-break:keep-all;

        cursor:pointer; 
        font-size:1.5em;
    }

</style>
<link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
<script src="beautify.js"></script>
<script src="prettify/prettify.js"></script>
</head>
<body>
<script>
    var bg = chrome.extension.getBackgroundPage();
    var scriptCode = bg.scriptCode;

    var cnt = 0;
    for(var x in scriptCode){
        var urlNode = document.createElement("h1");
        urlNode.innerText = x;
        document.body.appendChild(urlNode);


        var externalScript = scriptCode[x].externalScript;
        var inlineScript = scriptCode[x].inlineScript;

        var scriptListNode = document.createElement("ol");
        var scriptListHTML = [];
        var str;
        if(inlineScript.length > 0){
            str = '<li><a href="#node_'+(cnt++)+'">Inline JavaScript</a></li>';
            scriptListHTML.push(str);
        }

        for(var y in externalScript){
            str = '<li><a href="#node_'+(cnt++)+'">'+externalScript[y]+'</a><span class="opt_links">[<a href="javascript:void(0)" onclick="clearJSCache(this)">Clear Cache</a> | <a target="_blank" href="'+externalScript[y]+'">Open Link</a>]</span></li>';
            scriptListHTML.push(str);
        }
        scriptListNode.innerHTML = scriptListHTML.join("");
        document.body.appendChild(scriptListNode);
    }


    var blankSpace = document.createElement("div");
    blankSpace.innerHTML = "<br /><br /><br /><hr /><br /><br /><br />";
    document.body.appendChild(blankSpace);


    cnt = 0;
    for(var x in scriptCode){
        var externalScript = scriptCode[x].externalScript;
        var inlineScript = scriptCode[x].inlineScript;

        if(inlineScript.length > 0){
            var inlineScriptNode = document.createElement("details");
            inlineScriptNode.setAttribute("open", "open");
            inlineScriptNode.id = "node_"+cnt++;
            inlineScriptNode.innerHTML = "<summary>Inline JavaScript from "+x+"</summary>";
            document.body.appendChild(inlineScriptNode);

            var inlineScriptContentNode = document.createElement("pre");
            inlineScriptContentNode.className = "prettyprint";
            inlineScriptContentNode.innerText = beautify(scriptCode[x].inlineScript.join("\n"));
            inlineScriptNode.appendChild(inlineScriptContentNode);
        }

        for(var y in externalScript){
            var jsNode = document.createElement("details");
            jsNode.setAttribute("open", "open");
            jsNode.id = "node_"+cnt++;
            var url = externalScript[y];
            jsNode.innerHTML = '<summary>'+url+'</summary>';
            document.body.appendChild(jsNode);
            try{
                (function(url, node){ setTimeout(function(){
                    buildExternalScriptNode(url, node);
                }, 100*cnt)})(externalScript[y], jsNode);
            }catch(e){
                console.log(e.message + " : " + url);
            }
        }
    }
    //prettyPrint();



    bg.scriptCode = [];

    function buildExternalScriptNode(url, node){
        getFileContens(url, function(data){
            var contentNode = document.createElement("pre");
            contentNode.className = "prettyprint";
            contentNode.innerText = beautify(data);
            contentNode.title = "Dobule Click to Collapse.\n\n" + url ;
            //prettyPrint();
            node.appendChild(contentNode);

            contentNode.ondblclick = function(){
                this.parentNode.removeAttribute("open");
                location.hash = this.parentNode.id;
            }
        });
    
    }

    function getFileContens(url, callback){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                callback(xhr.responseText);
            }
        }
        xhr.open('GET', url, true);
        xhr.send(null);
    }
    function beautify(source){
        return js_beautify(source);
    }
    function clearJSCache(node){
        var url = node.parentNode.previousSibling.innerText;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.setRequestHeader("Cache-Control", "no-cache");
        xhr.send(null);
    }
</script>
</body>
</html>

